<template>
  <section class="whaleyVR index">
    <div class="whaley-brand">
      <div class="whaley-brand__outerring"></div>
      <div class="whaley-brand__interring"></div>
      <div class="whaley-brand__smallring"></div>
    </div>
    <div class="whaleyVR-profile">
      <p class="title whaleyVR-title">
        <span class="text">公司介绍：</span>
      </p>
      <p class="whaleyVR-profile__text gradient-text">
        <span class="horizontal-line"></span>
        <span class="slash"></span>
        微鲸VR专门从事虚拟现实相关业务，是集硬件产品、软件内容、内容平台于一体的全生态科技企业，在综艺演艺、体育直播、影视剧、游戏、房地产、教育等开展的商业化应用。
      </p>
    </div>
    <slot></slot>
  </section>
</template>
<script>
  export default {
    mounted () {
      this.draw()
    },
    methods: {
      draw () {
        const canvas = document.getElementById('c-text')
        if (canvas && canvas.getContext) {
          const ctx = canvas.getContext('2d')
          const cell = this.fontSize()
          const myGradient = ctx.createLinearGradient(0, 0, 8.62 * cell, 0)
          myGradient.addColorStop(0, 'rgba(42, 120, 180, .6)')
          myGradient.addColorStop(1, 'rgba(120, 61, 135, .05)')
          ctx.strokeStyle = '#23577a'
          ctx.lineWidth = 4
          ctx.beginPath()
          ctx.moveTo(0, cell * 0.85)
          ctx.lineTo(3 * cell, cell * 0.85)
          ctx.lineTo(3.77 * cell, 0)
          ctx.lineTo(8.62 * cell, 0)
          ctx.lineTo(8.62 * cell, cell * 0.85)
          ctx.lineTo(0, cell * 0.85)
          ctx.fillStyle = myGradient
          ctx.fill()
          ctx.stroke()
        }
      },
      fontSize () {
        const rootDOM = getComputedStyle(document.body.parentElement)
        const rootFontSize = rootDOM.getPropertyValue('font-size')
        if (rootFontSize) {
          return rootFontSize.slice(0, -2)
        }
        return 16
      }
    }
  }
</script>
<style lang="scss" scoped>
  .whaleyVR {
    &.index {
      position: relative;
      box-sizing: border-box;
      padding: 2.5rem .62rem 0;
      background: url('../assets/images/page-one-bg.png') no-repeat .25rem .5rem;
      background-size: 94.5% auto;      
    }
  }
  .whaley-brand {
    position: relative;
    width: 5.38rem;
    height: 5.3rem;
    margin: 0 auto;
    background: url('../assets/images/page-one-logo.png') no-repeat center center;
    background-size: 4.7rem 4.7rem; 
  }
  .whaley-brand__outerring {
    width: inherit;
    height: inherit;
    animation: show 200ms linear, slow 20000ms linear infinite;
    background: url('../assets/images/logo_outside.png') no-repeat center center;
    background-size: contain; 
  }
  .whaley-brand__interring {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    animation: slow 2000ms linear infinite;
    background: url('../assets/images/logo_mid.png') no-repeat center center;
    background-size: 4.28rem 4.35rem; 
  }
  .whaley-brand__smallring {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    animation: show 200ms linear, slow 16000ms 200ms linear infinite;
    background: url('../assets/images/logo_inside.png') no-repeat center center;
    background-size: 3.32rem 3.49rem;   
  }
  .whaleyVR-profile {
    .title {
      margin-bottom: .16rem;
    }
    //position: relative;
    margin: 1rem 0 0 .83rem;
    color: #fff;
    text-align: left;
    & .whaleyVR-profile__text {
      position: relative;
      z-index: 1;
      margin-top: -.97rem;
      padding: 1.4rem .8rem .7rem .85rem;
      font-size: .39rem;
      line-height: 1.55;
      width: 8.7rem;
      box-sizing: border-box;
      height: 4.86rem;
      clip-path: polygon(0 .9rem, 3.1rem .9rem, 4rem 0, 100% 0, 100% 100%, 0 100%);
    }
  }
  .horizontal-line {
    position: absolute;
    top: .91rem;
    left: 0;
    width: 3.05rem;
    z-index: -1;
    height: .04rem;
    background: #23577a;
  }
  .slash {
    position: absolute;
    top: .91rem;
    left: 3.05rem;
    width: 1.273rem;
    //z-index: -1;
    height: .06rem;
    background: #23577a;
    transform-origin: 0 0;
    transform: rotate(-45deg);
  }

  @keyframes slow {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(360deg)
    }
  }
  @keyframes show {
    0% {
      opacity: 0
    }
    100% {
      opacity: 1
    }
  }
</style>
